<template>
  <div>
    <el-drawer
      :visible.sync="showDrawer"
      :title="$t(`${from === 'send' ? 'sendSuccess' : 'orderDetail'}`)"
      size="35%"
      v-loading="loading"
      @close="$emit('close')"
    >
      <el-card class="detailCard">
        <div class="detailItem">
          <span style="flex-shrink: 0">{{ $t("status") }}</span>
          <div class="itemValue">
            <span class="text-success" v-if="coinData.status == 1">
              {{ $t("success") }}</span
            >
            <span class="text-info" v-if="coinData.status == 0">
              {{ $t("pending") }}</span
            >
            <span class="text-danger" v-if="coinData.status == 2">
              {{ $t("error") }}</span
            >
          </div>
        </div>
        <div class="detailItem">
          <span style="flex-shrink: 0">{{ $t("orderNo") }}</span>
          <div style="max-width: 60%; word-break: break-all; text-align: right">
            {{ coinData.bill_no }}
          </div>
        </div>
        <div class="detailItem">
          <span style="flex-shrink: 0">{{ $t("tradeType") }}</span>
          <div style="max-width: 60%; word-break: break-all; text-align: right">
            {{ coinData.trade_type }}
          </div>
        </div>
        <div class="detailItem">
          <span style="flex-shrink: 0">{{ $t("receiveAddress") }}</span>
          <div style="max-width: 60%; word-break: break-all; text-align: right">
            {{ coinData.to_address }}
            <i
              class="el-icon-copy-document copyIcon"
              @click="copy(coinData.to_address)"
            ></i>
          </div>
        </div>
        <div class="detailItem">
          <span style="flex-shrink: 0">{{ $t("count") }}</span>
          <div style="max-width: 60%; word-break: break-all; text-align: right">
            {{ coinData.sg }} {{ formatMoney(coinData.amount) }}
            {{ coinData.coin_name }}
          </div>
        </div>
        <div class="detailItem">
          <span style="flex-shrink: 0">{{ $t("fee") }}</span>
          <div style="max-width: 60%; word-break: break-all; text-align: right">
            {{ coinData.fee }} {{ coinData.fee_unit }}
          </div>
        </div>
        <div class="detailItem" v-if="coinData.tx_hash">
          <span style="flex-shrink: 0">{{ $t("HASH") }}</span>
          <div style="max-width: 60%; word-break: break-all; text-align: right">
            <a :href="coinData?.tx_url" target="_blank" class="toOther">{{
              coinData.tx_hash
            }}</a>
            <i
              class="el-icon-copy-document copyIcon"
              @click="copy(coinData.tx_hash)"
            ></i>
          </div>
        </div>
        <div class="detailItem">
          <span style="flex-shrink: 0">{{ $t("time") }}</span>
          <div style="max-width: 60%; word-break: break-all; text-align: right">
            {{ getTimes(coinData.create_time) }}
          </div>
        </div>
        <div class="detailItem">
          <span style="flex-shrink: 0">{{ $t("description") }}</span>
          <div style="max-width: 60%; word-break: break-all; text-align: right">
            {{ coinData.description || "--" }}
          </div>
        </div>
      </el-card>
    </el-drawer>
  </div>
</template>
<script>
// import { getWalletBillDetailNewApi } from "@/api/wallet/index";
// import { dayjs } from "element-ui";
import { formatMoney, getTimes } from "@/utils/common";
import { copyText } from "@/utils/common";
export default {
  name: "walletDetail",
  props: {
    isShowOrderDetail: {
      type: Boolean,
      default: false,
    },
    order_no: {
      type: String,
      default: "",
    },
    from: {
      type: String,
      default: "records",
    },
    coinData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      loading: true,
      showDrawer: false,
    };
  },
  created() {},
  methods: {
    formatMoney,
    getTimes,
    copy(text) {
      copyText(text);
      this.$message.success(this.$t("copySuccess"));
    },
  },
  watch: {
    isShowOrderDetail(val) {
      this.showDrawer = val;
    },
  },
};
</script>
<style lang="less" scoped>
.detailItem {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  font-size: 16px;
  .itemValue {
    max-width: 60%;
    word-break: break-all;
    text-align: right;
  }
}
.detailCard {
  width: 100%;
}
.copyIcon {
  cursor: pointer;
}
.toOther {
  margin-right: 4px;
  border-bottom: 1px solid #3555bc;
  color: #3555bc;
}
</style>
